<template>
    <div class="system-dic-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
            <el-form ref="dictDialogFormRef" :rules="rules" :model="state.ruleForm" size="default" label-width="90px">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
                            v-if="state.dialog.type==='addItem'||state.dialog.type==='editItem'">
                        <el-form-item label="字典键值" prop="dictKey">
                            <el-input v-model="state.ruleForm.dictKey" placeholder="请输入字典键值"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="字典名称" prop="dictValue">
                            <el-input v-model="state.ruleForm.dictValue" placeholder="请输入字典名称"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20"
                            v-if="state.dialog.type==='add'||state.dialog.type==='edit'">
                        <el-form-item label="字典编码" prop="code">
                            <el-input v-model="state.ruleForm.code" placeholder="请输入字典编码"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="字典排序" prop="sortOrder">
                            <el-input-number v-model="state.ruleForm.sortOrder" placeholder="请输入排序"
                                      clearable></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="字典备注" prop="remark">
                            <el-input v-model="state.ruleForm.remark" placeholder="请输入备注"
                                      clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="systemRoleDialog">
import {reactive, ref} from 'vue';
import DictApi from "/@/api/system/DictApi";
import {ElMessage} from "element-plus";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dictDialogFormRef = ref();
const state = reactive({
    ruleForm: {
        id: '',
        parentId: '0',
        code: '',
        dictKey: '',
        dictValue: '',
        sortOrder: 0,
        remark: ''
    } as RowDicType,
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});
const rules = ref({
    code: [{required: true, message: '字典编码不能为空', trigger: "blur"}],
    dictKey: [{required: true, message: '字典键值不能为空', trigger: "blur"}],
    dictValue: [{required: true, message: '字典名称不能为空', trigger: "blur"}],
})
// 打开弹窗
const openDialog = (type: string, row: RowDicType) => {
    state.dialog.type = type
    if (dictDialogFormRef.value) {
        clearForm()
        dictDialogFormRef.value.resetFields();
    }
    if (type === 'add') {
        state.dialog.title = '新增字典';
        state.dialog.submitTxt = '新 增';
    }
    if (type === 'addItem') {
        if (!row){
            return
        }
        state.ruleForm.code = row.code
        state.ruleForm.parentId = row.id
        state.dialog.title = '新增字典项';
        state.dialog.submitTxt = '新 增';
    }
    if (type === 'edit' || type === 'editItem') {
        DictApi.view(row.id).then(res => {
            state.ruleForm = res.data
        })
        state.dialog.title = '修改字典';
        state.dialog.submitTxt = '修 改';
    }
    state.dialog.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    dictDialogFormRef.value.validate((valid: boolean) => {
        if (!valid) {
            return false;
        }
        if (state.dialog.type === 'add' || state.dialog.type === 'addItem') {
            DictApi.insert(state.ruleForm).finally(() => {
                closeDialog();
                emit('refresh');
            })
            return;
        }
        if (state.dialog.type === 'edit' || state.dialog.type === 'editItem') {
            DictApi.update(state.ruleForm).finally(() => {
                closeDialog();
                emit('refresh');
            })
            return;
        }
        ElMessage.error("不支持该操作")
        closeDialog();
    })
    

};
const clearForm = () => {
    state.ruleForm.id = ''
    state.ruleForm.parentId = '0'
    state.ruleForm.code = ''
    state.ruleForm.dictKey = ''
    state.ruleForm.dictValue = ''
    state.ruleForm.sortOrder = 0
    state.ruleForm.remark = ''
}
// 暴露变量
defineExpose({
    openDialog,
});
</script>

<style scoped lang="scss">

</style>
